import { t } from 'i18next'
import React, { useEffect } from 'react'
import { Wrap, HeaderWrap, CardListWrap, StyledDeleteMeetingDialog } from './style'
import { useStore } from '../store'
import shallow from 'zustand/shallow'
import { MeetingCard } from './MeetingCard'
import { useGlobalStore } from '@/store/global'
import { Modal, RadioGroup, Radio, Input } from '@kedacom/react-next'
import { fetchKisCookie } from '@/api/global'

const MeetingList = () => {
	const { meetingList, cancelDialog, update, cancelValue, reason, auditOpt } = useStore(
		(state) => ({
			meetingList: state.meetingList,
			update: state.update,
			cancelDialog: state.cancelDialog,
			cancelValue: state.cancelValue,
			reason: state.reason,
			auditOpt: state.auditOpt,
		}),
		shallow
	)
	const { user, serverInfo } = useGlobalStore(
		(state) => ({ user: state.user, serverInfo: state.serverInfo }),
		shallow
	)

	useEffect(() => {
		if (serverInfo?.enable_kis && user?.enable_kis) {
			fetchKisCookie()
		}
	}, [serverInfo, user])

	return (
		<Wrap>
			<HeaderWrap>
				<div>{t('待审批的会议 （{{num}}）', { num: meetingList.length })} </div>
			</HeaderWrap>
			<CardListWrap className="cardList">
				{meetingList.map((meeting, index) => {
					return (
						<MeetingCard
							key={index}
							entity={meeting}
							enable_upload={user?.enable_upload ? true : false}
							userMoid={user?.moid ?? ''}
							orderArr={[index, meetingList.length]}
						></MeetingCard>
					)
				})}
			</CardListWrap>
			<Modal
				width={402}
				height={308}
				open={cancelDialog}
				title={t('驳回原因')}
				// rightIcon={<IconHelper onClick={() => setHelperShow(true)} />}
				onCancel={() => {
					update({ cancelDialog: false, reason: '', cancelValue: 1 })
				}}
				onOk={() => {
					if (cancelValue === 0 && !reason) {
						return false
					}
					auditOpt({
						operation: 3,
						audit_by: user?.moid ?? '',
					})
				}}
				okText={t('确定')}
				cancelText={t('取消')}
				onClick={(e) => e.stopPropagation()}
			>
				<StyledDeleteMeetingDialog className="delete-meeting-dialog">
					<RadioGroup
						value={cancelValue}
						direction="column"
						onChange={(e, value) => {
							update({
								cancelValue: value,
							})
						}}
					>
						<Radio value={1} height={18} className="radio">
							{t('会议时间冲突')}
						</Radio>
						<Radio value={2} height={18} className="radio">
							{t('会议室资源紧张')}
						</Radio>
						<Radio value={3} height={18} className="radio">
							{t('视频会议资源紧张')}
						</Radio>
						<div className="other-reason">
							<Radio value={0}>{t('其他')}</Radio>
							{cancelValue === 0 && (
								<Input
									className="reason-input"
									value={reason}
									width={227}
									maxLength={40}
									placeholder={t('请输入驳回原因')}
									rule={{
										required: {
											msg: t('审批不通过的原因不能为空'),
										},
									}}
									onChange={(e, v) => {
										update({ reason: v })
									}}
								/>
							)}
						</div>
					</RadioGroup>
				</StyledDeleteMeetingDialog>
			</Modal>
		</Wrap>
	)
}
export default MeetingList
